<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>TK首页</title>
		<link rel="stylesheet" href="css/common.css" type="text/css" />
		<link rel="stylesheet" href="css/index.css" type="text/css" />
		<link rel="stylesheet" href="css/swiper.min.css" type="text/css" />
		<script src="js/swiper.min.js"></script>
	</head>
	<body>
		<!--主体-->
		<div class="web">
			<header>
				<div class="top">
					<div class="main">
						<span>全国热线:88888888888</span>
						<div class="link fr">
							<a href="#">设置首页</a>
							<a href="#">添加收藏</a>
						</div>
					</div>
				</div>
				<!--导航-->
				<nav>
					<div class="navmain clearfix">
					<div class="logo">
						<a href=""><img src="img/nav_left_03.jpg" alt="" /></a>
					</div>
					<ul class="fr clearfix">
						<li class="active">
							<a href="index.html">
							<p>首页</p>
							<p>Home</p>
							</a>
						</li>
						<li>
							<a href="productxiangxi.html">
							<p>关于我们</p>
							<p>About</p>
							</a>
						</li>
						<li>
							<a href="product.html">
							<p>产品中心</p>
							<p>Products</p>
							</a>
						</li>
						<li>
							<a href="">
							<p>服务支持</p>
							<p>Service</p>
							</a>
						</li>
						<li>
							<a href="">
							<p>新闻中心</p>
							<p>News</p>
							</a>
						</li>
						<li>
							<a href="">
							<p>在线商店</p>
							<p>Shop</p>
							</a>
						</li>
						<li>
							<a href="">
							<p>联系我们</p>
							<p>Contact Us</p>
							</a>
						</li>
					</ul>
				</div>
				</nav>
			</header>
		
		<!--banner-->
		<!--<div class="carou">
				<div class="banner">
				 <img src="img/banner_02.png" alt="" width="100%"/>
				</div>
				 <ul class="bannercircle">
				 	<li></li>
				 	<li></li>
				 	<li></li>
				 	<li></li>
				 </ul>
				 
			</div>-->
			
			<div class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide"><img src="img/banner_02.png" alt="" width="100%"/></div>
				<div class="swiper-slide"><img src="img/banner_02.png" alt="" width="100%"/></div>
				<div class="swiper-slide"><img src="img/banner_02.png" alt="" width="100%"/></div>
			</div>
			<!-- 如果需要分页器 -->
			<div class="swiper-pagination"></div>

		</div>
	<script type="text/javascript">
		new Swiper('.swiper-container', {
			loop: true,
			direction: "horizontal",
			pagination: ".swiper-pagination",
			slideToClickedSlide:"true",
			autoplay:3000,
			speed:300,
			
		});
	</script>
			
			<div class="products">
			<div class="product clearfix">
					<div class="product_1">
						<div class="product_1top">
							<div class="newscenter">
							<div class="newsphoto">
								<img src="img/product1.png" alt="" />
							</div>
							<h4>新闻中心</h4>
							<p>NEWS.CENTER</p>
							</div>
							<div class="shuipingxian1"></div>
						</div>
						
						<div class="product_1center">
							<h3>CeBIT 2015</h3>
							<div class="product_1center_content clearfix">
							<div class="product_1center_left">
								<a href=""><img src="img/product_1.png" alt="" /></a>
							</div>
							<div class="product_1center_right">
								<p>创新ICT共建全联接世界德国汉诺威展览中心</p>
								<p>3月16日-20日</p>
							</div>
							</div>
						</div>
						<div class="product_1bottom">
							<ul>
								<li type="disc">上海国际智能建筑展览会</li>
								<li type="disc">2014德国柏林国际消费类电子产品展览会</li>
								<li type="disc">2014中国	(贵阳)公告安全防范产品博览会</li>
							</ul>
						</div>
					</div>
					<div class="product_2">
						<div class="product_2top">
							<div class="newscenter1">
							<div class="newsphoto">
								<img src="img/product2.png" alt="" />
							</div>
							<h4>新品发布</h4>
							<p>NEWS.PRODUCTS</p>
							</div>
							<div class="shuipingxian2"></div>
						</div>
						
						<div class="product_2center">
							<div class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide"><a href=""><img src="img/product_2.png" alt=""/></a></div>
				<div class="swiper-slide"><a href=""><img src="img/product_2.png" alt="" /></a></div>
				<div class="swiper-slide"><a href=""><img src="img/product_2.png" alt=""/></a></div>
			</div>
			 <div class="swiper-button-prev"></div>
    		<div class="swiper-button-next"></div>

		</div>
	<script type="text/javascript">
		new Swiper('.swiper-container', {
			loop: true,
			direction: "horizontal",
			prevButton:'.swiper-button-prev',
			nextButton:'.swiper-button-next',
			autoplay:3000,
			speed:300,
			
		});
		
			
	</script>
							
						</div>
					
						<div class="product_2bottom">
							<h2>s6213w-y</h2>
							<p>海恩3518E方案，多码流技术，百万高清</p>
						</div>
					</div>
					<div class="product_3">
						<div class="product_3top">
							<div class="newscenter">
							<div class="newsphoto">
								<img src="img/product3.png" alt="" />
							</div>
							<h4>品牌介绍</h4>
							<p>INFORMATION</p>
							</div>
							<div class="shuipingxian3"></div>
						</div>
						<div class="product_3center">
							<a href=""><img src="img/product_3.png" alt="" /></a>
						</div>
						<div class="product_3bottom">
							<p>"siepem"品牌是广州市TK科技有限公司推出的自有品牌</p>
						</div>
					
					</div>
			</div>
			</div>
<!--关于我们-->
			<div class="aboutustitle">
				<div class="aboutustitlecontent">
					<h3>关于我们</h3>
					<h5>STORE DISPLAY</h5>
				</div>
				
			</div>
			<div class="aboutus">
				<div class="jianjiecontent">
				<p id="jianjie">广州市TK科技有限公司是领先的监控产品供应商和解决方案服务商,面向全球提供领先的网络视频监控系列产品及专业的行业解决方案.</p>
				 <p id="jianjieneirong">TK公司自创立以来，一直持续加大研发投入和不断致力于技术创新。现拥一批技术尖端的研发团队，创造安防行业众多高品质，高性价比的精品
					持续为客户创造最大价值
				</p>
				</div>
				
				<div class="aboutproductph clearfix">
					<!--<div class="aboutusph1">
						<a href=""><img src="img/aboutusph1.png" alt="" /></a>
					</div>
					<div class="aboutusph2">
						<a href=""><img src="img/aboutusph2.png"/></a>
					</div>
					<div class="aboutusph3">
						<a href=""><img src="img/aboutusph3.png" alt="" /></a>
					</div>
					<div class="aboutusph4">
						<a href=""><img src="img/aboutusph4.png" alt="" /></a>
					</div>
					<div class="aboutusph5">
						<a href=""><img src="img/aboutusph5.png" alt="" /></a>
					</div>	-->
					 <ul id="scroll">  
						<li><a href="#"><img src="img/aboutusph2.png"  alt=""/></a></li>  
						<li><a href="#"><img src="img/aboutusph3.png"  alt=""/></a></li>  
						<li><a href="#"><img src="img/aboutusph4.png"  alt=""/></a></li>  
						
					 </ul>
					
				</div>
			</div>
			
			<!--联系我们-->
			
			<div class="contactustitle">
				<div class="contactustitle-1">
				<div class="contactustitlecontent">
					<h3>联系我们</h3>
					<h5>STORE DISPLAY</h5>
				</div>
				</div>
			</div>
			
			<div class="contact clearfix">
				
				<div class="contact-left">
					<div class="contact-left-top clearfix">
						<div class="contact-left-top-left">
							<div id="erweima"><img src="img/erweima.png" alt="" /></div>
							<div class="weixin">
							<p>微信扫一扫</p>
							<p>关注我们相关的信息</p>
							</div>
						</div>
						<div class="contact-left-top-right">
							<table>
								<tr>
									<td><div class="smallicon"><img src="img/l.png" alt="" /></div></td>
									<td>服务热线：</td>
									<td>400-000-0000</td>
								</tr>
								<tr>
									<td><div class="smallicon"><img src="img/2.png" alt="" /></div></td>
									<td>联系人：</td>
									<td>某先生</td>
								</tr>
								<tr>
									<td><div class="smallicon"><img src="img/3.png" alt="" /></div></td>
									<td>公司邮箱：</td>
									<td>www.tk.com</td>
								</tr>
								<tr>
									<td><div class="smallicon"><img src="img/4.png" alt="" /></div></td>
									<td>公司传真：</td>
									<td>000-12345678</td>
								</tr>
								<tr>
									<td><div class="smallicon"><img src="img/5.png" alt="" /></div></td>
									<td>邮政编码：</td>
									<td>467000</td>
								</tr>
								<tr>
									<td><div class="smallicon"><img src="img/6.png" alt="" /></div></td>
									<td>公司地址：</td>
									<td>广州市某某区某某路某号</td>
								</tr>
							</table>
						</div>
					</div>
					<div class="contact-left-bottom">
						<div class="ditu">
							<img src="img/ditu.png" alt="" />
						</div>
					</div>
					
				</div>
				<div class="contact-right">
					<form action="">
						<p><label for="name">昵称</label></p>
						<input type="text" id="name" />
						<p><label for="phone">联系电话</label></p>
						<input type="text" id="phone"/>
						<p><label for="eamil">电子邮箱</label></p>
						<input type="text" id="eamil"/>
						<p><label for="content">内容</label></p>
						<textarea name="" rows="7" cols="73" id="content"></textarea>
						<div>
							<input type="submit" id="submit" />
						</div>
					</form>
				</div>	
			</div>
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		<footer>
				<div class="guanzhuus">
					<span class="guanzhu">关注我们：</span>
					<div class="boqq">
						<a href=""><img src="img/boqqicon.png" alt="" /></a>
					</div>
					<div class="weixinicon">
						<a href=""><img src="img/weixinicon.png" alt="" /></a>
					</div>
				</div>
				<div class="daohang clearfix">
					<ul>
						<li><a href="">网站首页</a></li>
						<li type="disc"><a href="">新闻动态</a></li>
						<li type="disc"><a href="">关于我们</a></li>
						<li type="disc"><a href="">团队风采</a></li>
						<li type="disc"><a href="">联系我们</a></li>
						<li type="disc"><a href="">在线留言</a></li>
					</ul>
				</div>
				
				<div class="banquanarea">
					<div class="banquanxinxi">
						<p>&copy;2015 TK科技有限公司  版权所有泸ICP证13022560号-7 All Rights Reserved</p>
					</div>
				</div>
				
			</footer>
			</div>
	</body>
</html>


<script type="text/javascript">
						var id = function(el) { 
							return document.getElementById(el);   
						},
					       c = id('aboutproductph');
					   if(c) {
					       var ul = id('scroll'),
					           lis = ul.getElementsByTagName('li'),
					           itemCount = lis.length,
					           width = lis[0].offsetWidth, //获得每个img容器的宽度
					           marquee = function() {
					               c.scrollLeft += 2;
					               if(c.scrollLeft % width <= 1){  //当 c.scrollLeft 和 width 相等时，把第一个img追加到最后面
					                   ul.appendChild(ul.getElementsByTagName('li')[0]);
					                   c.scrollLeft = 0;
					               };
					           },
					           speed = 3; //数值越大越慢
					       ul.style.width = width*itemCount + 'px'; //加载完后设置容器长度        
					       var timer = setInterval(marquee, speed);
					       c.onmouseover = function() {
					           clearInterval(timer);
					       };
					       c.onmouseout = function() {
					           timer = setInterval(marquee, speed);
					       };
					   };
					</script>